<template>
  <div class="PACS">
    <div class="externalUrl">
      <div class="LISContent">
        <a-table
          class="pacsTable"
          rowKey="id"
          :columns="columns"
          :data-source="data1"
        >
          <!-- <span slot="num" slot-scope="text, record, index">
            {{
            (pagination.current - 1) * pagination.pageSize + parseInt(index) + 1
            }}
          </span> -->
          <template slot="operations" slot-scope="text, record">
            <div class="editable-row-operations">
                <a-button class="butSave" type="primary" @click="onPacs(record.id)">PACS</a-button>
            </div>
          </template>
        </a-table>
      </div>
      <!-- <iframe
        class="thirdPartyUrl"
        :src="url"
        scrolling="auto"
        frameborder="1"
      >
      </iframe>-->
    </div>
  </div>
</template>

<script>
export default {
  name: "PACS",
  data() {
    return {
      columns: [
        {
          title: "序号",
          dataIndex: "index",
          key: "index",
          scopedSlots: { customRender: "num" },
          width: 78,
          align: 'center'
        },
        {
          title: "编号",
          dataIndex: "encoding",
          scopedSlots: { customRender: "encoding" },
          width: 100,
          align: 'center'
        },
        {
          title: "操作",
          dataIndex: "operations",
          scopedSlots: { customRender: "operations" },
          width: 78,
          align: 'center'
        }
      ],
      data1: [
        {
          'index':'1',
          'encoding':'11'
        },
        {
          'index':'2',
          'encoding':'22'
        },
        {
          'index':'3',
          'encoding':'33'
        },
      ],
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
      },
      tailFormItemLayout: {
        wrapperCol: {
          xs: {
            span: 24,
            offset: 0,
          },
          sm: {
            span: 16,
            offset: 8,
          },
        },
      },
      //url:'http://101.133.170.90:9091/ET.PACS.Web.xbap?dir=2&uid=1.2.840.20210601224500.2106010003',
      //url:'https://baijiahao.baidu.com/s?id=1731149662377994028&wfr=spider&for=pc'
    };
  },
  mounted() {
    // this.$refs.demo.contentWindow.location.href="http://101.133.170.90:9091/ET.PACS.Web.xbap?dir=2&uid=1.2.840.20210601224500.2106010003"
    // let ifr = document.querySelector('.thirdPartyUrl');
    // ifr.onload = function () {
    //   console.log(ifr.contentWindow.name);
    //   ifr.contentWindow.close()
    // }
  },
  methods: {
    onPacs() {
      window.open(
        "http://101.133.170.90:9091/ET.PACS.Web.xbap?dir=2&uid=1.2.840.20210601224500.2106010003"
      );
    }
  }
};
</script>

<style lang="scss" scoped>
.PACS {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  .externalUrl {
    position: absolute;
    top: 30px;
    width: 90%;
    min-height: 562px;
    background: #fff;
    margin-left: 30px;
    display: flex;
    align-items: center;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    .thirdPartyUrl {
      width: 100%;
      min-height: 562px;
      border-radius: 8px;
    }
  }
  .title_ {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    border-bottom: 1px #ddd solid;
    span {
      margin-left: 30px;
      font-size: 16px;
      font-weight: bold;
    }
  }
  .LISContent {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
  }
  .pacsTable {
      min-height: 562px;
      width: 100%;
      background: #ffffff;
      position: relative;
      display: flex;
      justify-content: center;
      border: 1px solid #c4d7e1;
      border-radius: 6px;
  }
  .butSave {
      width: 94px;
      height: 30px;
      border-radius: 30px;
      background-color: #0078b5;
      font-size: 16px;
      color: #fff;
    }
}
</style>

<style>
.pacsTable .ant-table-thead > tr > th .ant-table-header-column {
  color: #5a77b1;
}
.PACS .ant-spin-nested-loading {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
}
.PACS .ant-spin-container {
  width: 95% !important;
}
.pacsTable .ant-table-thead > tr > th {
  background-color: #fff !important;
  border-bottom: 1px solid #5c78aa !important;
  color: #5a77b1 !important;
  font-size: 16px !important;
  font-weight: bold !important;
  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important;
}
.pacsTable .ant-table-pagination.ant-pagination {
  display: none !important;
}
</style>